<!-- 实体卡余额记录 -->
<template>
	<view class="page" :style="{ '--color': color }">
		<status-bar title="实体卡余额明细"></status-bar>
		<backTop v-if="toTop"></backTop>
		<view class="headBox thmeBg">
			<image :src="staticUrl + '/images/integralRecord.png'" mode="aspectFill" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0"></image>
			<view class="recentMonth flex-box align-center">
				<text class="iconfont icon-xiangzuo" :class="{ conotClick: currentIndex == 0 }" @click="prevMonth"></text>
				<swiper class="swiper flex" display-multiple-items="3" @change="swiperChange" :current="currentIndex" :disable-touch="true">
					<swiper-item>
						<view class="swiper-item"></view>
					</swiper-item>
					<swiper-item v-for="(item, index) in date" :key="index">
						<view
							class="swiper-item"
							:class="{
								active: currentIndex == index
							}"
							@click="tapMonth(index)"
						>
							{{ item.name }}
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"></view>
					</swiper-item>
				</swiper>
				<text class="iconfont icon-xiangyouxiayiye" :class="{ conotClick: currentIndex == 11 }" @click="nextMonth"></text>
			</view>
			<view class="tatalIntegral flex-box">
				<text>总余额：</text>
				<text class="weight">{{ integral }}</text>
			</view>
			<view class="tatalIntegral1 flex-box align-center">
				<text>本月总收入：{{ earn }}</text>
				<text class="midLine"></text>
				<text>本月总消耗：{{ use }}</text>
			</view>
		</view>
		<!-- 余额明细 -->
		<view class="recordBox">
			<view class="recordListTitle">余额收支明细</view>
			<view class="underline"></view>
			<view class="recordList" v-if="recordList.length > 0">
				<block v-for="(item, index) in recordList" :key="index">
					<view class="recordItem flex-box flex-between align-center">
						<view class="recordLeft flex">
							<view class="recordName">{{ item.title }}</view>
							<view class="recordDate">{{ item.addDate }}</view>
						</view>
						<view>
							<text class="increase success-color" v-if="item.status == 1">+{{ item.t_wallet }}</text>
							<text class="decrease error-color" v-else>-{{ item.t_wallet }}</text>
						</view>
					</view>
					<view class="underline"></view>
				</block>
				<view class="DiLine" v-if="recordList && recordList.length > 0 && !more">----- 我也是有底线的 -----</view>
			</view>
			<empty type="1" cat="4" v-else msg="暂无相关信息"></empty>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			toTop: false,
			currentIndex: 11,
			recordList: [],
			integral: 0,
			earn: 0,
			use: 0,
			staticUrl: this.staticUrl,
			page: 1,
			more: false,

			date: [],
			noData: false
		};
	},
	onLoad() {
		let year = new Date().getFullYear();
		let month = new Date().getMonth() + 1;
		for (var i = 0; i < 12 - month; i++) {
			// 去年
			this.date.push({
				year: year - 1,
				month: i + month + 1 < 10 ? '0' + (i + month + 1) : i + month + 1,
				name: i + month + 1 + '月'
			});
		}
		for (var i = 0; i < month; i++) {
			// 今年
			this.date.push({
				year: year,
				month: i + 1 < 10 ? '0' + (i + 1) : i + 1,
				name: i + 1 + '月'
			});
		}
		this.currentIndex = this.date.length - 1;
		this.getRecord(false);
		this.$BarTitle(`${this.nameDefinition.fenTitle}明细`);
	},

	methods: {
		getRecord(flag) {
			this.more = false;
			if (!flag) {
				this.recordList = [];
				this.page = 1;
			}
			this.getUserIntegral();
			this.$http
				.post({
					url: '/SRA_userIntegral/tWalletRecord',
					data: {
						VeriCode: this.bid,
						vId: this.vid,
						Y: this.date[this.currentIndex].year,
						M: this.date[this.currentIndex].month,
						pageIndex: this.page,
						pageSize: 20
					}
				})
				.then((res) => {
					if (res.code != 100) return this.$Toast(res.msg);
					const result = res.data || [];
					this.recordList = this.recordList.concat(result);
					if (result && result.length > 19) {
						this.more = true;
						this.page++;
					}
					if (this.recordList.length < 1) {
						this.noData = true;
					}
					uni.hideLoading();
				});
		},

		swiperChange(e) {
			console.log(e);
		},
		getUserIntegral() {
			this.$http
				.post({
					url: '/SRA_userIntegral/thisMonthTWallet',
					data: {
						VeriCode: this.bid,
						vId: this.vid,
						Y: this.date[this.currentIndex].year,
						M: this.date[this.currentIndex].month
					}
				})
				.then((res) => {
					if (res.code != 100) return this.$Toast(res.msg);
					const result = res.data;
					this.integral = result.v_t_wallet;
					this.earn = result.gainTWallet;
					this.use = result.minusTWallet;
				});
		},
		tapMonth(index) {
			if (index == this.currentIndex) {
				return;
			}
			if (index < this.currentIndex + 1) {
				this.prevMonth();
			}
			if (index > this.currentIndex) {
				this.nextMonth();
			}
		},
		prevMonth() {
			if (this.currentIndex > 0) {
				this.currentIndex--;
				uni.showLoading({
					title: '加载中'
				});
				this.getRecord(false);
			}
		},
		nextMonth() {
			if (this.currentIndex < 11) {
				this.currentIndex++;
				uni.showLoading({
					title: '加载中'
				});
				this.getRecord(false);
			}
		}
	},
	computed: {
		...mapState(['color', 'nameDefinition', 'vid', 'share', 'bid'])
	},
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			desc: this.share.desc,
			path: '/pages/index/index?share_v_id=' + this.vid,
			imageUrl: this.share.imageUrl
		};
	},
	onPageScroll(e) {
		if (e.scrollTop > 300) {
			this.toTop = true;
		} else {
			this.toTop = false;
		}
	},
	onReachBottom() {
		if (this.more) {
			this.getRecord(true);
		}
	}
};
</script>

<style scoped lang="scss">
.underline {
	height: 1px;
	background-color: #eeeeee;
}

.icon-xiangyouxiayiye,
.icon-xiangzuo {
	color: white;
	font-size: 28rpx;
}

.headBox {
	padding: 24rpx 36rpx;
	position: relative;
}

.recentMonth {
	margin: 0 46rpx 0 46rpx;
	height: 52rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 52rpx;
	padding: 0 26rpx;
	position: relative;
	z-index: 33;
}

.swiper {
	height: 100%;
	margin: 0 14rpx;
}

.swiper swiper-item {
	text-align: center;
	line-height: 52rpx;
}

.swiper-item {
	color: white;
	font-size: 24rpx;
}

.icon-jiantouyou {
	color: white;
	font-size: 28rpx;
}

.icon-jiantouyou:nth-last-of-type(2) {
	transform: rotate(180deg);
}

/* 当前查看的月份 */
.swiper-item.active {
	font-size: 36rpx;
}

/* 未来的月份 */
.swiper-item.future {
	opacity: 0.6;
}

.conotClick {
	opacity: 0.4;
}

.tatalIntegral {
	justify-content: center;
	align-items: flex-end;
	margin: 20rpx 0;
}

.tatalIntegral text {
	font-size: 32rpx;
	color: white;
}

.tatalIntegral .weight {
	font-size: 56rpx;
	color: white;
	font-weight: bold;
	margin-bottom: -8rpx;
}

.tatalIntegral1 {
	justify-content: center;
	align-items: flex-end;
}

.tatalIntegral1 text {
	color: white;
}

.midLine {
	display: inline-block;
	margin: 0 30rpx;
	width: 2rpx;
	height: 34rpx;
	background-color: white;
	transform: scale(0.5);
}

/* 日历 */
.recordListTitle {
	text-align: center;
	color: #232323;
	font-size: 32rpx;
	line-height: 80rpx;
}

.recordItem {
	padding: 24rpx 36rpx;
}

.recordLeft {
	margin-right: 20rpx;
}

.recordDate {
	color: #999999;
	font-size: 20rpx;
}

.recordName {
	color: #232323;
	margin-bottom: 10rpx;
}

.increase {
	font-size: 36rpx;
	padding: 0;
}

.decrease {
	font-size: 36rpx;
}
</style>
